<template>
	<div>
		<el-form :disabled="isDisabled" class="dialog-layout" ref="userForm" :rules="rules" :model="state.ruleForm" size="default" label-width="90px">
			<el-row :gutter="35">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" prop>
					<el-form-item label="用户账号" prop="accountNumber">
						<el-input v-model="state.ruleForm.accountNumber" :disabled="props.editItem.id" placeholder="请输入用户账号" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="用户昵称" prop="userName">
						<el-input v-model="state.ruleForm.userName" placeholder="请输入用户昵称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" prop="phoneNumber">
					<el-form-item label="手机电话" prop="phoneNumber">
						<el-input v-model="state.ruleForm.phoneNumber" placeholder="请输入手机电话" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="电子邮箱">
						<el-input v-model="state.ruleForm.email" placeholder="请输入电子邮箱" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="微信号码">
						<el-input v-model="state.ruleForm.weChatNumber" placeholder="请输入微信号码" clearable></el-input>
					</el-form-item>
				</el-col>

				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="关联部门" prop="departmentId">
						<el-select v-model="state.ruleForm.departmentId" placeholder="请选择关联部门" class="w100">
							<el-option v-for="item in state.deptData" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="关联角色" prop="sysRoleId">
						<el-select v-model="state.ruleForm.sysRoleId" placeholder="请选择关联角色" class="w100">
							<el-option v-for="item in state.userData" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="关联职务" prop="dutiesId">
						<el-select v-model="state.ruleForm.dutiesId" placeholder="请选择关联职务" class="w100">
							<el-option v-for="item in state.dutiesData" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="用户地址">
						<el-input v-model="state.ruleForm.address" type="textarea" placeholder="请输入用户地址" maxlength="150"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="用户状态">
						<el-switch v-model="state.ruleForm.status" :active-value="1" :inactive-value="2" active-text="开启" inactive-text="冻结" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="dialog-btn">
			<el-button @click="onCancel" size="default">取 消</el-button>
			<el-button :disabled="isDisabled" type="primary" @click="onSubmit(userForm)" size="default">确 认</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { DepartmentGetPagedList } from '/@/api/department/index';
import { SysUserCreate, SysUserUpdate } from '/@/api/user/index';
import { DutiesGetPagedList } from '/@/api/duties/index';
import { SysRoleGetPagedList } from '/@/api/role/index';
import { FormInstance, ElMessage } from 'element-plus';
// 定义父组件传过来的值
const props = defineProps({
	editItem: {
		type: Object,
		default: () => {},
	},
	isDisabled: {
		type: Boolean,
		default: false,
	},
});
// 定义子组件向父组件传值/事件
const emit = defineEmits(['close']);

// 定义变量内容
const state = reactive({
	ruleForm: {
		accountNumber: '', // 用户账号
		userName: '', // 用户昵称
		phoneNumber: '', // 手机电话
		email: '', // 电子邮箱
		weChatNumber: '', // 微信号码
		departmentId: '', // 关联部门
		sysRoleId: '', // 关联角色
		dutiesId: '', // 关联职务
		address: '', // 用户地址
		status: 1, // 用户状态
	} as any,
	deptData: [] as any[], // 部门数据
	dutiesData: [] as any[], // 职务数据
	userData: [] as any[], // 用户数据
});
onMounted(() => {
	getTableData();
});
// 初始化列表
const getTableData = async () => {
	const params = {
		PageIndex: 1,
		PageSize: 999999,
	};
	let data = await DepartmentGetPagedList(params);
	let dataDuties = await DutiesGetPagedList(params);
	let dataUser = await SysRoleGetPagedList(params);
	state.deptData = data.data.items;
	state.dutiesData = dataDuties.data.items;
	state.userData = dataUser.data.items;
	if (props.editItem) {
		for (const key in state.ruleForm) {
			if (props.editItem[key]) state.ruleForm[key] = props.editItem[key];
		}
	}
};

// 关闭弹窗
const onCancel = () => {
	emit('close');
};

const rules = reactive({
	accountNumber: [{ required: true, message: '请输入用户账号', trigger: ['blur', 'change'] }],
	userName: [{ required: true, message: '请输入用户昵称', trigger: ['blur', 'change'] }],
	phoneNumber: [{ pattern: /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/, message: '请输入合法手机号', trigger: ['blur', 'change'] }],
	email: [{ pattern: /^([0-9A-Za-z\-_.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g, message: '请输入正确的邮箱', trigger: ['blur', 'change'] }],
	departmentId: [{ required: true, message: '请选择关联部门', trigger: ['blur', 'change'] }],
	sysRoleId: [{ required: true, message: '请选择关联角色', trigger: ['blur', 'change'] }],
	dutiesId: [{ required: true, message: '请选择关联职务', trigger: ['blur', 'change'] }],
});
const userForm = ref<FormInstance>();
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid) => {
		if (valid) {
			const params = {
				...state.ruleForm,
			};
			if (props.editItem.id) {
				await SysUserUpdate(params, props.editItem.id);
			} else {
				await SysUserCreate(params);
			}
			ElMessage.success(props.editItem ? '修改成功' : '新增成功');
			onCancel();
		}
	});
};
</script>
